<template lang="html">
    <div class='detail'>
        <van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="onClickLeft">
        <template #right>
            <van-icon name="chat-o" dot size='18'/>
        </template>
    </van-nav-bar>
    <img :src="arr.img"> 
     <div v-text='"￥"+arr.price' class='detail-1'></div>
    <div v-text='arr.desc' class='detail-2'></div>    
     <van-button type='info' @touchstart='addToCart' class='detail-3'>加入购物车</van-button>
</div>
</template>

<script>
import { Button, Toast, NavBar } from "vant";
export default {
  components: {
    [Button.name]: Button,
    [NavBar.name]: NavBar
  },
  data: function() {
    return {
      arr: []
    };
  },
  mounted() {
    let params = {
      good_id: this.$route.params.id
    };
    console.log(params)
    this.$http.getGoodDetail(params).then(res => {
     this.arr = res[0]
         console.log(res);
      console.log("拿到了什么？", res);
    });
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    addToCart() {
      let data = {
        good_id: this.arr._id
      };
      this.$http.addToCart(data).then(res => {
        Toast("添加成功", res);
        this.timer = setTimeout(() => {
          this.$router.push("/cart");
        }, 1000);
      });
    }
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  }
};
</script>

<style lang="scss">
.detail {
  & > img {
    width: 100%;
    height: 100%;
  }
  .detail-1 {
    text-align: left;
    color: red;
  }
  .detail-2 {
    font-size: 16px;
    font-weight: bold;
    margin-top: 5px;
  }
  .detail-3 {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
}
</style>